<template>
  <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
    <a-form :form="form">
       <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="选择需识别图片"
          hasFeedback> 
          <a-upload
                :action="uploadAction"
                listType="picture-card"
                class="avatar-uploader"
                :showUploadList="false"
                :beforeUpload="beforeUpload"
                @change="handleChange"
            >
                <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
                <div v-else>
                    <a-button>
                    <a-icon type="upload"/>
                    upload
                    </a-button>
                </div>
            </a-upload>
        </a-form-item>
      <a-form-item
        :wrapperCol="{ span: 24 }"
        style="text-align: center"
      >
        <a-button @click="handleSubmit" style="margin-left: 8px">开始识别</a-button>
      </a-form-item>
       <a-form-item 
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="识别结果"
          v-show="visibleResult">
          {{ result }}
        </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
function getBase64 (img, callback) {
  const reader = new FileReader()
  reader.addEventListener('load', () => callback(reader.result))
  reader.readAsDataURL(img)
}
  import { postAction, getAction } from '@/api/manage'
  export default {
    name: 'BaseForm',
    data () {
      return {
        description: '调用百度进行文字识别测试场-增值税发票。',
        value: 1,
        loading: false,
        imageUrl: '',
        uploadAction:window._CONFIG['domianURL']+"/ocr/identify/upload",
        saveAction:window._CONFIG['domianURL']+"/ocr/identify/getinvoic",
        labelCol: {
          xs: {span: 24},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
        fileList: {},
        headers: {},
        previewVisible: false,
        // form
        form: this.$form.createForm(this),
        visibleResult: false,
        result: ''
      }
    },
    methods: {
      handleChange (info) { 
        if (info.file.status === 'uploading') {
            this.loading = true
            return
        }
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            getBase64(info.file.originFileObj, (imageUrl) => {
            this.imageUrl = imageUrl
            this.loading = false
            })
        }
        this.fileList=info.fileList;
        },
        beforeUpload (file) {
        const isJPG = file.type === 'image/jpeg'
        if (!isJPG) {
            this.$message.error('You can only upload JPG file!')
        }
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isLt2M) {
            this.$message.error('Image must smaller than 2MB!')
        }
        return isJPG && isLt2M
        },
      // handler
      handleSubmit () { 
        var that = this;
        let uploadFiles = this.fileList
        let path = ''
        if(!uploadFiles || uploadFiles.length==0){
            this.$message.warning('请选择需识别图片');
        }
        let formData = {};
        formData.dbpath = this.fileList[0].response.message;
        console.log(formData);
        postAction(this.saveAction, formData).then((res) => {
            if (res.success) {
                console.log(res.message);
                that.$message.success(res.message);
                that.visibleResult = true;
                that.result = JSON.stringify(res.result);
                that.$emit('ok');
            } else {
                that.$message.warning(res.message);
            }
        }).finally(() => {
        })
      }
    }
  }
</script>

<style>
.avatar-uploader > .ant-upload {
  width: 104px;
  height: 104px;
}
.avatar-uploader > .ant-upload img {
  width: 84px;
  height: 84px;
}
</style>